<template>
  <div class="header-warp">
    <img src="@assets/cheese.png" alt="这是芝士" @click="router.push('/')" />
    <div class="header-button">
      <div class="register-button">
        <a class="register-text" @click="router.push('/register')">注册</a>
      </div>
      <div class="login-button">
        <a class="login-text" @click="router.push('/login')">登录</a>
      </div>
    </div>
  </div>
</template>
<script setup>
const router = useRouter()
</script>

<style lang="scss" scoped>
.header-warp {
  height: 72px;
  background-color: #ffa157;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100vw;

  img {
    margin: auto;
    text-align: center;
    width: 124px;
    padding-left: 0;
    cursor: pointer;
  }

  .header-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    text-align: left;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.875rem;

    .login-button {
      display: inline-block;
      height: 100%;
      cursor: pointer;

      .login-text {
        display: block;
        padding: 0 30px;
        height: 100%;
        line-height: 72px;
        vertical-align: middle;
        font-weight: 700;
        background-color: #ffa157;
        color: #fff;

        &:hover {
          background-color: #e87343;
        }
      }
    }

    .register-button {
      display: inline-block;
      height: 100%;
      border-left: 1px solid #e87343;
      border-right: 1px solid #e87343;
      cursor: pointer;

      .register-text {
        display: block;
        padding: 0 30px;
        height: 100%;
        line-height: 72px;
        vertical-align: middle;
        font-weight: 700;
        background-color: #ffa157;
        color: #fff;

        &:hover {
          background-color: #e87343;
        }
      }
    }
  }
}
</style>
